<template>
  <a-modal :title="title" :visible="visible" width="50%" @cancel="onCancel">
    <a-timeline v-if="rows.length > 0">
      <a-timeline-item
        :color="color(item)"
        v-for="(item, index) in rows"
        :key="index"
      >
        <p>{{ item.createTime }}</p>
        <div class="timeline-item-box">
          <div>
            <p v-if="item.type === 1">企业信息审核</p>
            <p v-if="item.type === 2">资质证明审核</p>
            <p v-if="item.type === 3">荣誉奖项审核</p>
          </div>
          <p>
            <span>审批状态:</span>
            <span v-if="item.approvalStatus === 1" class="green">已通过</span>
            <span v-if="item.approvalStatus === 2" class="red">已驳回</span>
          </p>
          <p>
            <span>审批人:</span>
            <span>{{ item.approvalUser }}</span>
          </p>
          <p>
            <span>审批时间:</span>
            <span>{{ item.createTime }}</span>
          </p>
          <p v-if="item.approvalStatus === 2">
            <span>驳回理由:</span>
            <span class="red">{{ item.approvalRejection }}</span>
          </p>
        </div>
      </a-timeline-item>

      <!-- <a-timeline-item color="red">
        <p>Solve initial network problems 1</p>
        <p>Solve initial network problems 2</p>
        <p>Solve initial network problems 3 2015-09-01</p>
      </a-timeline-item> -->
    </a-timeline>
    <a-empty v-else />
    <template slot="footer">
      <a-button type="primary" @click="onCancel">关闭</a-button>
    </template>
  </a-modal>
</template>
<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    rows: {
      type: Array,
      default: [],
    },
    title: {
      type: String,
      default: "",
    },
  },

  computed: {},

  mounted() {
    console.log("+++++", this.rows);
  },
  methods: {
    onCancel() {
      this.$emit("close");
    },

    color(item) {
      if (item.approvalStatus == 1) {
        return "green";
      } else {
        return "red";
      }
    },
  },
};
</script>

<style scoped>
h2 {
  font-size: 18px;
  color: #303133;
  font-weight: 700;
  padding-bottom: 14px;
}

.green {
  color: #67c23a;
}

.red {
  color: #f56c6c;
}

.blue {
  color: #409eff;
}

.timeline-item-box {
  padding: 4px 10px;
  border: 1px solid #e9e9e9;
  border-radius: 10px;
  box-sizing: border-box;
}
</style>
